<template>
  <div v-if="data">
    <a-modal title="申请抖音佣金" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="m5">产品ID：{{ data.id }}</div>
      <div class="m5">产品名称：{{ data.productName }}</div>
      <div class="m5">站点：{{ data.locationName }}</div>

      <title-box class="mt20 mb5">设置抖音佣金</title-box>
      <div v-for="(item, index) in data.itemsByteDanceMoney" :key="index" class="mb10">
        <div class="mb10">套餐{{ index + 1 }}：{{ item.itemName }}</div>
        <a-table :columns="columns" :data-source="[item]" :pagination="false">
          <template slot="byteDanceMoney" slot-scope="text, row">
            <a-input type="text" v-model="row.byteDanceMoney" />
          </template>
        </a-table>
      </div>
      <div v-if="data.logs">
        <title-box class="mt20 mb20"> 申请抖音佣金日志</title-box>
        <a-timeline-item v-for="(item, index) in data.logs" :key="index">
          <div class="mb10">
            <span class="pr10"> {{ item.createTime }}</span>
            <a-tag color="#108ee9" v-if="item.auditStatus == 0">
              待审核
            </a-tag>
            <a-tag color="#87d068" v-if="item.auditStatus == 1">
              通过
            </a-tag>
            <a-tag color="#f50" v-if="item.auditStatus == 2">
              驳回
            </a-tag>
          </div>
          <div class="mb10" v-for="(el, i) in item.operationContent" :key="i">
            {{ el.itemName }}
            <span class="pl10"> 抖音佣金：{{ el.byteDanceMoney }} </span>
          </div>
          <div class="mb10">操作人：{{ item.applicantName }}</div>
        </a-timeline-item>
      </div>
    </a-modal>
  </div>
</template>

<script>
import TitleBox from '../../goodsManag/components/detailsTitle'
import { submitApplicationStockDanceMoney } from '@/service'

const columns = [
  {
    title: '门市价',
    dataIndex: 'originPrice',
    key: 'originPrice'
  },
  {
    title: '商品售价',
    dataIndex: 'salePrice',
    key: 'salePrice'
  },
  {
    title: '商家结算价',
    dataIndex: 'settlePrice',
    key: 'settlePrice'
  },
  {
    title: '抖音佣金',
    dataIndex: 'byteDanceMoney',
    key: 'byteDanceMoney',
    scopedSlots: { customRender: 'byteDanceMoney' }
  }
]
export default {
  model: {
    prop: 'inventoryPush',
    event: 'change'
  },
  props: {
    inventoryPush: {
      type: Boolean,
      default: false
    },
    productId: {
      type: Number
    },
    data: { type: Object }
  },
  data() {
    return {
      confirmLoading: false,
      addProductStockAmount: null,
      columns
    }
  },
  computed: {
    visible: {
      get() {
        if (!this.data) return false
        return this.inventoryPush
      },
      set(v) {
        this.$emit('change', v)
      }
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    async handleOk() {
      await submitApplicationStockDanceMoney({
        ...this.data
      })
      this.$messageSend.success('成功')
      this.handleCancel()
    }
  },
  components: { TitleBox }
}
</script>

<style scoped lang="scss">
.inventoryPushinfo {
  font-size: 12px;
  color: orange;
}
</style>
